<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>总表单数</span>
            </div>
          </template>
          <div class="stat-number">12</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>已发布表单</span>
            </div>
          </template>
          <div class="stat-number">8</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>草稿表单</span>
            </div>
          </template>
          <div class="stat-number">4</div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日编辑</span>
            </div>
          </template>
          <div class="stat-number">2</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="recent-forms">
      <template #header>
        <div class="card-header">
          <span>最近编辑的表单</span>
        </div>
      </template>
      
      <el-table :data="recentForms" style="width: 100%">
        <el-table-column prop="name" label="表单名称" />
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === '已发布' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="200">
          <template #default>
            <el-button link type="primary">编辑</el-button>
            <el-button link type="primary">预览</el-button>
            <el-button link type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const recentForms = ref([
  {
    name: '访视日期表',
    type: '基础表单',
    status: '已发布',
    updateTime: '2024-01-15 14:30'
  },
  {
    name: '人口学资料',
    type: '复杂表单',
    status: '草稿',
    updateTime: '2024-01-15 11:20'
  },
  {
    name: '既往病史',
    type: '复杂表单',
    status: '已发布',
    updateTime: '2024-01-14 16:45'
  },
  {
    name: '体格检查',
    type: '基础表单',
    status: '草稿',
    updateTime: '2024-01-14 09:15'
  }
])
</script>

<style lang="scss" scoped>
.home-container {
  .stat-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .stat-number {
      font-size: 28px;
      font-weight: bold;
      color: #409EFF;
      text-align: center;
      padding: 20px 0;
    }
  }
  
  .recent-forms {
    .card-header {
      font-weight: bold;
    }
  }
}
</style> 